<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>element属性的增删改</title>
  <script>
    function test(){
      alert('点击函数')
    }
    window.onload = function() {
      var dom = document.getElementById('first')
      // 获取元素的某个属性
      // .访问只能获取到dom节点的自有属性
      // getAttribute()不仅能够获取dom的自有属性，还能获取它的自定义属性
      console.log(dom.className);
      console.log(dom.getAttribute('title'));
      console.log(dom['data-test']);
      console.log(dom.getAttribute('data-test'));
      // 设置dom节点的某个属性
      dom.className = 'newBox'
      dom.setAttribute('title','hello')
      // dom['data-test'] = 'editTest'
      dom.setAttribute('data-test','editTest')
      // 删除某个属性
      // dom.removeAttribute('id')

      // 获取dom节点中特殊属性style/onclick
      var inner = dom.children[0]
      console.log(inner.style);
      console.log(inner.onclick);
      console.log(inner.getAttribute('style'));
      console.log(inner.getAttribute('onclick'));
    }
  </script>
</head>
<body>
  <div class="box" id="first" title="盒子" data-test="test">
    <div class="inner" style="width: 100px;background-color: brown;" onclick="test()">one</div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</body>
</html>